<script setup>
import Header from "./components/Header.vue";
import Navigator from "./components/Navigator.vue";
import Content from "./components/Content.vue";
import {ref} from "vue";

// 父组件声明一个变量
let fatherData = "传家宝~~~[来自父组件]";

// 创建一个响应式对象
let sonDataRef = ref("默认值");

// 为了接收子组件传递过来的数据，声明一个事件响应函数
// 响应函数以入参的形式接收子组件发送过来的数据
const receiveSonData = (data) => {
  sonDataRef.value = data;
}
</script>

<template>
  <div>
    <p>子组件发送到父组件的数据：{{sonDataRef}}</p>
    <!-- 子组件定义的数据名称，在父组件被当做一个自定义事件类型 -->
    <Header @sonDataName="receiveSonData"/>
    <Navigator/>
    <!-- 向子组件传递数据 -->
    <Content :fatherInfo="fatherData"/>
  </div>
</template>

<style scoped>
</style>
